<template>
	<div>
		<Card>
			<Button style="margin: 10px 0;" type="primary" @click="createNsall = true">创建分组</Button>
			<!-- 新建面板 -->
			<Modal v-model="createNsall" title="创建分组" @on-ok="create" @on-cancel="cancel">
				<div class="form-div">
					<label class="myLabel">所有者：</label>
					<Select style="width:200px" v-model="owner">
						<Option v-for="item in peopleList" :key="item.uid" :value="item.userName">{{item.userName}}</Option>
					</Select>
				</div>
				<div class="form-div">
					<label class="myLabel">分组名称：</label>
					<Input v-model="metaName" placeholder="请输入实例名称" style="width: 200px" />
				</div>
			</Modal>
			<!-- 删除面板 -->
			<Modal v-model="deleteNsall" title="删除分组" @on-ok="remove" @on-cancel="cancel">
				是否删除该分组
			</Modal>
			<Table :columns="columns" :data="tableData"></Table>
			<div class="center">
				<div class="pageBox">
					<Page :total="count" show-total :page-size ="pageSize" @on-change="handlePage"/>
				</div>
			</div>
		</Card>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				columns: [
					{
						title: '分组名称',
						key: 'metadata',
						render: (h, params) => {
							return h('span', params.row.metadata.name)
						}
					},
					{
						title: '标签',
						key: 'metadata',
						render: (h, params) => {
							if (params.row.metadata.labels !== undefined) {
								let str = ''
								for (let key in params.row.metadata.labels) {
									str += '{' + key + ':' + params.row.metadata.labels[key] + '}'
								}
								return h('span', str)
							} else {
								return h('span', '-')
							}
						}
					},
					{
						title: '状态',
						key: 'status',
						render: (h, params) => {
							return h('span', params.row.status.phase)
						}
					},
					{
						title: '运行时间',
						key: 'metadata',
						render: (h, params) => {
							var date1 = new Date(params.row.metadata.creationTimestamp).toString().replace(/-/g, '/')
							var date2 = new Date(+new Date(date1) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
							return h('span', date2)
						}
					},
					{
						title: '操作',
						key: 'handle',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.show(params.index)
										}
									}
								}, '查看'),
								h('Button', {
									props: {
										type: 'error',
										size: 'small'
									},
									on: {
										click: () => {
											this.deleteNsall = true
											this.deleteName = params.row.metadata.name
											this.deleteIndex = params.index
										}
									}
								}, '删除')
							])
						}
					}
				],
				tableData: [],
				createNsall: false,
				// 用户列表
				peopleList: [],
				// 所有者
				owner: '',
				// 分组名称
				metaName: '',
				// 删除面板
				deleteNsall: false,
				// 删除组名
				deleteName: '',
				// 删除下标
				deleteIndex: '',
				count: 0,
				pageSize: 5,
				myData: []
			}
		},
		methods: {
			// 展示面板数据回调
			show (index) {
				var date1 = new Date(this.tableData[index].metadata.creationTimestamp).toString().replace(/-/g, '/')
				var date2 = new Date(+new Date(date1) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
				this.$Modal.info({
					title: '信息',
					content: `分组：${this.tableData[index].metadata.name}<br>状态：${this.tableData[index].status.phase}<br>运行时间：${date2}`
				})
			},
			// 删除
			remove () {
				this.$api.delete(0, '/kuber/v2/k8s/nameSpace?name=' + this.deleteName, {}, r => {
					if (r.data.code === 0) {
						this.tableData.splice(this.deleteIndex, 1)
						this.$Message.success('删除成功')
					} else {
						this.$Message.error('删除失败')
					}
					this.cancel()
				})
			},
			// 新建
			create () {
				this.$api.post(0, '/kuber/v2/k8s/nameSpace', {
					owner: this.owner,
					name: this.metaName
				}, r => {
					if (r.data.code === 0) {
						this.$Message.success('新建成功')
						this.getList()
					} else {
						this.$Message.error('新建失败')
					}
					this.cancel()
				})
			},
			cancel () {
				this.owner = ''
				this.metaName = ''
				this.deleteName = ''
				this.deleteIndex = ''
			},
			// 获取表格数据
			getList () {
				this.$api.get(0, '/kuber/v2/k8s/nameSpace', {}, r => {
					this.myData = r.data.data.items
					this.count = this.myData.length
					this.getListByPage(1)
				})
			},
			// 获取所有用户
			getPeople () {
				this.$api.get(0, '/usr/v2/user/list', {}, r => {
					if (r.data.code === 0) {
						this.peopleList = r.data.data
					}
				})
			},
			// 分页
			handlePage (page) {
				this.getListByPage(page)
			},
			// 根据页码获取数据
			getListByPage (page) {
				this.tableData = []
				for (let i = 0; i < this.pageSize; i++) {
					if (this.myData[i + (page - 1) * this.pageSize] !== undefined) {
						this.tableData.push(this.myData[i + (page - 1) * this.pageSize])
					}
				}
			}
		},
		mounted () {
			this.getList()
			this.getPeople()
		}
	}
</script>

<style>
	label.myLabel {
		width: 100px;
		display: inline-block;
		margin-right: 15px;
		text-align: right;
	}

	div.form-div {
		margin-bottom: 15px;
	}

	.resources .ivu-modal {
		width: 500px !important
	}

	.resources label.myLabel {
		width: 200px
	}

	.resources .ivu-input-wrapper {
		width: 200px
	}
</style>
